<%--
  Created by IntelliJ IDEA.
  User: 邹敦宇
  Date: 2021/3/10
  Time: 18:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>收货地址管理</title>
    <%
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
    %>
    <base href="<%=basePath%>">
    <link rel="icon" type="image/x-icon" href="img/title-icon.jpg"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/top.css" />
    <link rel="stylesheet" href="css/deliverAddress.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <link rel="stylesheet" href="static/css/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css" />
</head>
<body>

<%--头部--%>
<jsp:include page="top-shopp.jsp"></jsp:include>
<!--编辑收货地址-->
<div class="w1230">
    <h3 class="add-title">新增收货地址</h3>
    <div class="add-address">
            <div class="add-area">
                <label>地址信息：</label>
                <div id="area"></div>
            </div>
            <p>
                <label>详细地址：</label>
                <textarea placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息" class="add-detail"></textarea>
            </p>
            <p>
                <label>收货人姓名：</label>
                <input type="text" class="add-name" placeholder="请输入收货人姓名"/>
            </p>
            <p>
                <label>手机号码：</label>
                <input type="text" class="add-tel" placeholder="请输入收货人手机号"/>
            </p>
            <p class="chk-address">
                <input type="checkbox" id="chk-address"/>
                <span>设置为默认收货地址</span>
            </p>
            <input type="button" value="保存" class="save-btn"/>
    </div>
</div>
<!--收货地址列表-->
<div class="add-list w1230">
    <p class="message"><i class="fa fa-exclamation-circle"></i>只能保存5个地址</p>
    <table class="table-list">
        <tr>
            <th class="t-name">收货人</th>
            <th class="t-address">收货地址</th>
            <th class="t-tel">手机号</th>
            <th class="t-operate">操作</th>
            <th class="t-default"></th>
        </tr>
        <tr>
            <td>张三</td>
            <td>湖北省武汉市洪山区光谷软件园A</td>
            <td>13912349876</td>
            <td><a href="#">修改</a>|<a href="#">删除</a></td>
            <td class="default-on">默认地址</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>湖北省武汉市洪山区光谷软件园B</td>
            <td>13009876666</td>
            <td><a href="#">修改</a>|<a href="#">删除</a></td>
            <td><a href="#">设为默认</a></td>
        </tr>
        <tr>
            <td>王五</td>
            <td>湖北省武汉市洪山区光谷软件园C</td>
            <td>13588880000</td>
            <td><a href="#">修改</a>|<a href="#">删除</a></td>
            <td><a href="#">设为默认</a></td>
        </tr>
    </table>
</div>
<!--脚注-->
<div class="footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
<script src="js/jquery.js"></script>
<script src="js/area.js"></script>
<script>
    let m='add';
    $(function () {
        refreshTable()
        $('.save-btn').click(function () {
            let receivingAddress = $($('#area select')[0]).val()+$($('#area select')[1]).val()+$($('#area select')[2]).val()+$('.add-detail').val();
            $.post('/eshop/receivingAddress.do',{m:m,receivingAddress:receivingAddress,receivingPerson:$('.add-name').val(),mobilePhone:$('.add-tel').val(),
                userId:'${sessionScope.reception.id}',isDefault:$('#chk-address').prop('checked')?1:-1},function (data) {
                refreshTable()
                emptyAdd()
                alert(data)
            })

        })

        $($('#area select')[0]).on('change',function () {
            if ($(this).val()==-1){
                $($('#area select')[1]).find('option:gt(0)').remove();
                $($('#area select')[2]).find('option:gt(0)').remove();
            }else {
                addShi()
            }
        })
        $($('#area select')[1]).on('change',function () {
            if ($(this).val()==-1){
                $($('#area select')[2]).find('option:gt(0)').remove();
            }else {
                addQu()
            }

        })
    })

    //删除地址findByID
    function deleteRA(AddressID) {
        if (AddressID!=null&&AddressID.length>0){
            if (confirm('确定删除吗？')){
                $.get('/eshop/receivingAddress.do',{m:'delete',id:AddressID},function (data) {
                    refreshTable()
                    alert(data)
                })
            }

        }
    }

    //刷新表格
    function refreshTable() {
        $.get('/eshop/receivingAddress.do',{m:'selectByUserID',userID:'${sessionScope.reception.id}'},function (data) {
            $('.table-list tr:gt(0)').remove()
            data.forEach(function (e, i) {
                let str = ' <tr><td>'+e.receivingPerson+'</td><td>'+e.receivingAddress+'</td><td>'+e.mobilePhone+'</td><td><a href="javascript:void(0)" onclick="updateDA(\''+e.id+'\')">修改</a>|<a href="javascript:void(0)" onclick="deleteRA(\''+e.id+'\')">删除</a></td>'
                if (e.isDefault==1){
                    str +=' <td class="default-on">默认地址</td>'
                }else {
                    str += '<td><a href="javascript:void(0)">设为默认</a></td>'
                }
                str +='</tr>'
                $('.table-list').append(str)
            })
        },'json')
    }

    //清空输入框
    function emptyAdd() {
        $('.add-address input[type="text"]').val('')
        $('.add-address textarea').val('')
        $('#area select').val('')
        $('#chk-address').attr('checked',false)
    }

    //修改方法
    function updateDA(id) {

        m = 'update';

        $.ajax({
            type:'get',
            url:'/eshop/receivingAddress.do',
            data:{m:'findByID',id:id},
            dataType:'json',
            sync:false,
            success:function (data) {
                $($('#area select')[0]).find('option:gt(0)').remove();
                addSheng(data.receivingAddress)
                addShi(data.receivingAddress)
                addQu(data.receivingAddress)
                let receivingAddress = $($('#area select')[0]).val()+$($('#area select')[1]).val()+$($('#area select')[2]).val();
                let arr = data.receivingAddress.split(receivingAddress)
                arr.forEach(function (e, i) {
                    console.log(e);
                    if (e!=receivingAddress){
                        $('.add-detail').val(e)
                    }
                })
                $('.add-name').val(data.receivingPerson)
                $('.add-tel').val(data.mobilePhone)
                $('#chk-address').prop('checked',data.isDefault==1);
            }
        })
    }
</script>
</body>
</html>
